import React, { useState, useEffect } from 'react';
import styles from './index.less';

import kls from 'classnames';
import EchartsWrap from '@/components/widgets/EchartsWrap';
import 'echarts-liquidfill/src/liquidFill.js';
// import { useStatisticsData } from '../../index';
import _cloneDeep from 'lodash/cloneDeep';
import { useSelector } from 'umi';

const _data = [
  {
    value: 100,
    title: '进行中',
  },
  {
    value: 100,
    title: '未开始',
  },
  {
    value: 455,
    title: '已完成',
  },
];

const Chart1 = () => {
  // const [rawData] = useStatisticsData(); // 单一api中的值
  const rawData = useSelector(store => store.projectPage.statisticsData);

  const [data, setData] = useState(_data);
  const [current, setCurrent] = useState(_data[0].title);
  const [dataOption, setDataOption] = useState(getAnalysisChartCfg(_data[0].title));

  useEffect(() => {
    if (!rawData) {
      return;
    }
    const newData = _cloneDeep(_data);
    newData[1].value =
      rawData.processTotalNumber -
      rawData.doingProcessTotalNumber -
      rawData.finishedProcessTotalNumber;
    newData[0].value = rawData.doingProcessTotalNumber;
    newData[2].value = rawData.finishedProcessTotalNumber;
    setData(newData);
  }, [rawData]);

  useEffect(() => {
    setDataOption(getAnalysisChartCfg(current));
  }, [data, current]);

  function getAnalysisChartCfg(curSelect) {
    const total = data.reduce((r, { value }) => r + value, 0);
    let options = {
      toolbox: {
        show: false,
      },
      title: [
        {
          text: `{num|${total}} {unit|个}`,
          top: '25%',
          left: '50%',
          subtext: '总计',
          textAlign: 'center',
          textStyle: {
            rich: {
              num: {
                fontSize: 22,
                fontFamily: 'AlibabaPuHuiTi-Bold, AlibabaPuHuiTi',
                fontWeight: 'bold',
                color: '#FFFFFF',
                lineHeight: 30,
                verticalAlign: 'bottom',
              },
              unit: {
                fontSize: 14,
                lineHeight: 30,
                color: '#FFFFFF',
                verticalAlign: 'bottom',
              },
            },
          },
          subtextStyle: {
            fontSize: 12,
            fontFamily: 'AlibabaPuHuiTi-Bold, AlibabaPuHuiTi',
            color: 'rgba(255,255,255,0.6)',
          },
        },
      ],
      series: [
        {
          type: 'pie', // 装饰圆环
          radius: ['89%', '90%'],
          center: ['50%', '50%'],
          data: [1],
          label: {
            normal: {
              show: false,
            },
          },
          itemStyle: {
            color: 'rgba(255,255,255,0.6)',
          },
        },
        {
          type: 'liquidFill', // 装饰波浪
          radius: '70%',
          center: ['50%', '50%'],
          data: [1], // data个数代表波浪数
          backgroundStyle: {
            borderWidth: 1,
            color: 'rgba(255, 255, 255, 0.0)',
          },
          label: {
            normal: {
              show: false,
            },
          },
          color: ['rgba(255, 255, 255, 0.2)'],
          outline: {
            borderDistance: 0,
            itemStyle: {
              borderWidth: 1,
              borderColor: 'rgba(255, 255, 255, 0.2)',
            },
          },
        },
        // 真实数据
        {
          type: 'pie',
          center: ['50%', '50%'],
          radius: ['83%', '95%'],
          hoverAnimation: false,
          data: data.map(item => {
            return {
              name: item.title,
              value: item.value,
              labelLine: {
                show: false,
              },
              itemStyle: {
                color:
                  curSelect === item.title ? 'rgba(19, 194, 194, 1)' : 'RGBA(129, 130, 132, 0)',
              },
              emphasis: {
                labelLine: {
                  show: false,
                },
              },
            };
          }),
          itemStyle: {
            normal: {
              // borderColor: 'RGBA(26, 29, 31, 1)',
              // borderWidth: 4,
            },
          },
          label: {
            normal: {
              show: false,
            },
          },
        },
      ],
    };

    return options;
  }

  const renderList = () => {
    return (
      <div className={styles.itemWrap}>
        {data.map(item => {
          return (
            <div
              className={kls(styles.item, { [styles.selected]: current === item.title })}
              key={item.title}
              onClick={() => {
                setCurrent(item.title);
                setDataOption(getAnalysisChartCfg(item.title, item.value));
              }}
            >
              <div className={styles.itemTop}>
                <div className={styles.itemTitle}>
                  {/* <div className={styles.selectedDecorate}></div> */}
                  {item.title}
                </div>
                <div className={styles.itemValue}>{item.value}</div>
              </div>

              <div className={styles.itemBottom}>
                <div className={styles.itemBottomL}></div>
                <div className={styles.itemBottomR}></div>
              </div>
            </div>
          );
        })}
      </div>
    );
  };
  return (
    <div className={styles.box}>
      <div className={styles.boxInner}>
        <div className="chart-box1">
          <EchartsWrap option={dataOption} style={{ width: '140px', height: '140px' }} />
        </div>

        <div className={styles.wrapRight}>{renderList()}</div>
      </div>
    </div>
  );
};
export default Chart1;
